﻿@model List<YcHighChartsMvc.Model.Chart.chartConfig>
@{
    ViewBag.Title = "HighCharts";
    Layout = "../Shared/_Layout.cshtml";
}
@section head{
    <script src="../../Content/Highcharts-3.0.9/js/highcharts.js" type="text/javascript"></script>
    <script src="../../Content/Highcharts-3.0.9/js/modules/exporting.js" type="text/javascript"></script>
    <script src="../../Content/Highcharts-3.0.9/js/highcharts-more.js" type="text/javascript"></script>
    <script type="text/javascript">
    var options = {
	        chart: {
	            plotBackgroundColor: null,
	            plotBorderWidth: null,
	            plotShadow: false,
	            renderTo:'container'
	        },
	        title: {
	            text: '@Model[0].Title'
	        },
	        tooltip: {
	          pointFormat: '{series.name}: <b>{point.y}</b>'
	        },
	        labels:{
		        items:[{
			        html:'',
			        style: {
				        left:'532px',
				        top:'160px',				
			        }
		        }],
		        style:{
			        color:'red',
			        fontSize:45,
			        fontWeight:'bold',
			        zIndex:1000
		        }
	        },
	        series: @Html.Raw(Model[0].SeriesJson)
        };

        $(document).ready(function(){
	        var chart = new Highcharts.Chart(options);
	
	        $("button.change").click(function(){
		        var type = $(this).html();
		
		        if(type == "pie") {
			        options.tooltip.pointFormat = '{series.name}: <b>{point.percentage:.1f}%</b>';
		        }else {
			        options.tooltip.pointFormat = '{series.name}: <b>{point.y}</b>';
		        }
		        options.chart.type = type;
		        chart = new Highcharts.Chart(options);
	        });
        });		
</script>			
    }
    @*<script type="text/javascript">
        
    </script>*@
    <div id="container" style="min-width:700px;height:400px"></div>
  <div style="margin:10px 0px 10px 20px;">
      点击按钮切换图表：
      <button class="change">line</button>
      <button class="change">spline</button>
      <button class="change">pie</button>
      <button class="change">area</button>
      <button class="change">column</button>
      <button class="change">areaspline</button>
      <button class="change">bar</button>
      <button class="change">scatter</button>
  </div>
